<script lang="ts" setup>
import {FormInstance} from 'element-plus/es'
import {computed, reactive, ref} from 'vue'
import {FormRules} from 'element-plus'
import {TaskInsertDto} from "@/interface/dto/task/TaskInsertDto.ts";
import {useCommonStore} from "@/pinia/common.ts";
import VeCronSelect from 've-cron-select/index.vue'

const commonStore = useCommonStore();

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    required: true,
    default: () => false
  }
})

const data = reactive<TaskInsertDto>({
  code: "",
  cron: "* * * * * ? *",
  taskParam: "",
  title: ""
})

const formRef = ref<FormInstance>()

const rules = computed(() => {
  return reactive<FormRules>({
    title: [
      {required: true, message: '请输入标题', trigger: 'blur'},
      {max: 90, message: '标题长度在1~90字符之间', trigger: 'blur'}
    ],
    code: [
      {required: true, message: '请输入代码', trigger: 'blur'},
      {max: 90, message: '代码长度在1~90字符之间', trigger: 'blur'}
    ],
    cron: [{required: true, message: '请选择cron表达式', trigger: 'change'}]
  })
})

const emits = defineEmits(['closed', 'onSubmit'])

const closed = (formEl: FormInstance | undefined | any) => {
  formEl?.resetFields()
  emits('closed')
}

const submitForm = async (formEl: FormInstance | undefined | any) => {
  if (!formEl) return
  await formEl.validate((valid: any) => {
    if (valid) {
      emits('onSubmit', data)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined | any) => {
  if (!formEl) return
  formEl?.resetFields()
}

const handleChangeCron = (cron: string) => {
  data.cron = cron
}
</script>

<template>
  <el-dialog
      v-model="props.dialogVisible"
      destroy-on-close
      draggable
      width="500px"
      @closed="closed(formRef)">
    <template #header>
      新增
    </template>
    <el-form
        ref="formRef"
        :model="data"
        :rules="rules"
        label-position="top">
      <el-form-item prop="title">
        <template #label>
          标题
        </template>
        <el-input v-model="data.title"
                  placeholder="请输入标题"
                  clearable/>
      </el-form-item>
      <el-form-item prop="code">
        <template #label>
          代码
        </template>
        <el-input v-model="data.code"
                  placeholder="请输入代码"
                  clearable/>
      </el-form-item>
      <el-form-item label="cron" prop="cron">
        <ve-cron-select :cron="data.cron" style="width: 100%" @change="handleChangeCron"/>
      </el-form-item>
      <el-form-item prop="taskParam">
        <template #label>
          任务参数
        </template>
        <el-input v-model="data.taskParam"
                  placeholder="请输入任务参数"
                  clearable
                  maxlength="65535"
                  show-word-limit
                  type="textarea"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm(formRef)">清空</el-button>
        <el-button :loading="commonStore.loading" type="primary" @click="submitForm(formRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
</style>
